<!--#
layout("/layouts/platform.html"){
#-->
<div id="app" v-cloak>
    <el-row class="header ">
        <!--<div class="btn-group tool-button mt5">
            <el-button size="medium" @click="openAdd"><i class="ti-plus"></i> 新建单位</el-button>
        </div>
-->
        <div class="pull-right offscreen-right" style="margin-right: 20px;line-height: 50px;">
            <el-tooltip class="item" effect="dark" content="新建单位">
                <el-button type="primary" icon="el-icon-plus"  size="mini" @click="openAdd" circle></el-button>
            </el-tooltip>
        </div>
    </el-row>
    <el-row  class="el-table-container">
        <el-table :data="tableData" style="width: 100%" size="small" border
                  :highlight-current-row="true" row-key="id" lazy
                  :load="loadChild">
            <el-table-column label="单位名称" header-align="center" prop="name"
                             width="200" :show-overflow-tooltip="true" align="left">
            </el-table-column>

            <el-table-column label="检验部门" header-align="center" prop="sfjybm" :show-overflow-tooltip="true" align="center">
                <template slot-scope="scope" >
                    <span v-if="scope.row.sfjybm==1">是</span>
                    <span v-else>否</span>
                </template>
            </el-table-column>

            <el-table-column label="地址" header-align="center" prop="address" :show-overflow-tooltip="true" align="center">
            </el-table-column>

            <el-table-column label="电话" header-align="center" prop="telephone"
                             :show-overflow-tooltip="true" align="center">
            </el-table-column>

            <el-table-column label="网址" header-align="center" prop="website"
                             :show-overflow-tooltip="true" align="center">
            </el-table-column>

            <el-table-column label="操作" header-align="center" prop="website"
                             :show-overflow-tooltip="true" align="center" width="120">
                <template slot-scope="scope">
                    <el-dropdown @command="dropdownCommand">
                        <el-button size="mini">
                            <i class="ti-settings"></i>
                            <span class="ti-angle-down"></span>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="{type:'edit',id:scope.row.id,name:scope.row.name}">
                                修改
                            </el-dropdown-item>
                            <el-dropdown-item :command="{type:'delete',id:scope.row.id,name:scope.row.name}"
                                              v-if="scope.row.path!='0001'">
                                删除
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <el-dialog :close-on-click-modal="false"
            title="新建单位"
            :visible.sync="addDialogVisible"
            width="40%">
        <el-form :model="formData" ref="addForm" :rules="formRules" size="small" label-width="80px">
            <el-form-item prop="parentId" label="上级单位" label-width="80px">
                <el-cascader
                        style="width: 100%"
                        tabindex="1"
                        :props="{ checkStrictly: true }"
                        :options="options"
                        :show-all-levels="false"
                        v-trim v-model="parentUnit"
                        :fetch-suggestions="unitQuery"
                        @active-item-change="unitChange"
                        @change="unitChange2"
                        @select="unitSelect"
                        placeholder="不选择则为顶级"
                ></el-cascader>
            </el-form-item>
            <el-form-item prop="name" label="单位名称">
                <el-input maxlength="100" placeholder="单位名称"
                          v-trim v-model="formData.name"
                          auto-complete="off" tabindex="2" type="text"></el-input>
            </el-form-item>
            <el-form-item prop="aliasName" label="单位别名">
                <el-input maxlength="100" placeholder="单位别名"
                          v-trim v-model="formData.aliasName"
                          auto-complete="off" tabindex="3" type="text"></el-input>
            </el-form-item>
            <el-form-item prop="sfjybm" label="检验部门">
                <el-radio-group v-model="formData.sfjybm">
                    <el-radio label="0">否</el-radio>
                    <el-radio label="1">是</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item prop="unitcode" label="机构编码">
                <el-input maxlength="100" placeholder="机构编码"
                          v-trim v-model="formData.unitcode"
                          auto-complete="off" tabindex="4" type="text"></el-input>
            </el-form-item>
            <el-form-item prop="address" label="单位地址">
                <el-input maxlength="100" placeholder="单位地址"
                          v-trim v-model="formData.address"
                          auto-complete="off" tabindex="5" type="text"></el-input>
            </el-form-item>
            <el-form-item prop="telephone" label="联系电话">
                <el-input maxlength="100" placeholder="联系电话"
                          v-trim v-model="formData.telephone"
                          auto-complete="off" tabindex="6" type="text"></el-input>
            </el-form-item>
            <el-form-item prop="email" label="单位邮箱">
                <el-input maxlength="100" placeholder="单位邮箱"
                          v-trim v-model="formData.email"
                          auto-complete="off" tabindex="7" type="text"></el-input>
            </el-form-item>
            <el-form-item prop="website" label="单位网站">
                <el-input maxlength="100" placeholder="单位网站"
                          v-trim v-model="formData.website"
                          auto-complete="off" tabindex="8" type="text"></el-input>
            </el-form-item>
            <el-form-item prop="note" label="单位介绍">
                <el-input type="textarea" v-trim v-model="formData.note"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="doAdd">确 定</el-button>
                  </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false"
            title="编辑单位"
            :visible.sync="editDialogVisible"
            width="40%">
        <el-form :model="formData" ref="editForm" :rules="formRules" size="small" label-width="80px">
            <el-form-item prop="name" label="单位名称">
                <el-input maxlength="100" placeholder="单位名称"
                          v-trim v-model="formData.name"
                          auto-complete="off" tabindex="2" type="text"></el-input>
            </el-form-item>
            <el-form-item prop="aliasName" label="单位别名">
                <el-input maxlength="100" placeholder="单位别名"
                          v-trim v-model="formData.aliasName"
                          auto-complete="off" tabindex="3" type="text"></el-input>
            </el-form-item>
            <el-form-item prop="sfjybm" label="检验部门">
                <el-radio-group v-model="formData.sfjybm">
                    <el-radio label="0">否</el-radio>
                    <el-radio label="1">是</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item prop="unitcode" label="机构编码">
                <el-input maxlength="100" placeholder="机构编码"
                          v-trim v-model="formData.unitcode"
                          auto-complete="off" tabindex="4" type="text"></el-input>
            </el-form-item>
            <el-form-item prop="address" label="单位地址">
                <el-input maxlength="100" placeholder="单位地址"
                          v-trim v-model="formData.address"
                          auto-complete="off" tabindex="5" type="text"></el-input>
            </el-form-item>
            <el-form-item prop="telephone" label="联系电话">
                <el-input maxlength="100" placeholder="联系电话"
                          v-trim v-model="formData.telephone"
                          auto-complete="off" tabindex="6" type="text"></el-input>
            </el-form-item>
            <el-form-item prop="email" label="单位邮箱">
                <el-input maxlength="100" placeholder="单位邮箱"
                          v-trim v-model="formData.email"
                          auto-complete="off" tabindex="7" type="text"></el-input>
            </el-form-item>
            <el-form-item prop="website" label="单位网站">
                <el-input maxlength="100" placeholder="单位网站"
                          v-trim v-model="formData.website"
                          auto-complete="off" tabindex="8" type="text"></el-input>
            </el-form-item>
            <el-form-item prop="note" label="单位介绍">
                <el-input type="textarea" v-trim v-model="formData.note"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="doEdit">确 定</el-button>
                  </span>
    </el-dialog>
</div>
<script>
    new Vue({
        el: "#app",
        data: function () {
            return {
                addDialogVisible: false,
                editDialogVisible: false,
                tableData: [],//后台取出的数据
                formData: {
                    id: "",
                    parentId: "",
                    sfjybm:0
                },
                formRules: {
                    name: [
                        {required: true, message: '单位名称', trigger: ['blur', 'change']}
                    ],
                    email: [
                        {required: false, message: '单位邮箱', trigger: ['blur', 'change']},
                        {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
                    ]
                },
                options: [],
                parentUnit: []
            }
        },
        methods: {
            //级联选择器从后台动态获取下级数据
            loadTree: function (val, cb) {
                var url = base + "/platform/sys/unit/tree";
                $.post(url, {pid: val}, function (data) {
                    if (data.code == 0) {
                        cb(data.data);
                    }
                }, "json");
            },
            unitQuery: function (queryString, cb) {
                cb(this.options);
            },
            unitSelect: function (val) {
            },
            unitTree: function (table, data, pid) {//树形数据的级联查找很是头疼
                var self = this;
                table.findIndex(function (obj) {
                    if (pid == obj.value) {
                        obj.children = data;
                    } else if (obj.children && obj.children.length > 0) {
                        self.unitTree(obj.children, data, pid);
                    }
                });
            },
            unitChange2: function (val) {
                var self = this;
                if (val[0] == "root") {
                    self.parentUnit = [];
                }
            },
            unitChange: function (val) {
                var self = this;
                var pid = val[val.length - 1];
                self.parentUnit = val;
                this.loadTree(pid, function (tree) {
                    self.unitTree(self.options, tree, pid);
                });
            },
            openAdd: function () {
                var self = this;
                this.addDialogVisible = true;
                this.formData = {id: "",parentId: "",sfjybm:"0"};//打开新增窗口,表单先清空
                this.parentUnit = [];
                this.loadTree("", function (val) {
                    self.options = val;
                });
            },
            doAdd: function () {
                var self = this;
                var url = base + "/platform/sys/unit/addDo";
                self.$refs["addForm"].validate(function (valid) {
                    if (valid) {//表单验证通过
                        self.formData.parentId = self.parentUnit[self.parentUnit.length - 1] || "";
                        $.post(url, self.formData, function (data) {
                            if (data.code == 0) {
                                self.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                                self.addDialogVisible = false;
                                self.initTreeTable();
                            } else {
                                self.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }
                        }, "json");
                    }
                });
            },
            doEdit: function () {
                var self = this;
                var url = base + "/platform/sys/unit/editDo";
                self.$refs["editForm"].validate(function (valid) {
                    if (valid) {//表单验证通过
                        self.formData.parentId = self.parentUnit[self.parentUnit.length - 1];
                        $.post(url, self.formData, function (data) {
                            if (data.code == 0) {
                                self.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                                self.editDialogVisible = false;
                                self.initTreeTable();
                            } else {
                                self.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }
                        }, "json");
                    }
                });
            },
            initTreeTable: function () {
                var self = this;
                var url = base + "/platform/sys/unit/child";
                $.post(url, {pid: ""}, function (data) {
                    if (data.code == 0) {
                        self.tableData = data.data;
                    }
                }, "json");

            },
            loadChild: function (tree, treeNode, resolve) {
                var url = base + "/platform/sys/unit/child";
                $.post(url, {pid: tree.id}, function (data) {
                    if (data.code == 0) {
                        resolve(data.data);
                    }
                }, "json");
            },
            dropdownCommand: function (command) {//监听下拉框事件
                var self = this;
                if ("edit" == command.type) {
                    $.post(base + "/platform/sys/unit/edit/" + command.id, {}, function (data) {
                        if (data.code == 0) {
                            self.formData = data.data;//加载后台表单数据
                            self.editDialogVisible = true;//打开编辑窗口
                        } else {
                            self.$message({
                                message: data.msg,
                                type: 'error'
                            });
                        }
                    }, "json");
                }
                if ("delete" == command.type) {
                    self.$confirm('此操作将删除 ' + command.name, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        callback: function (a, b) {
                            if ("confirm" == a) {//确认后再执行
                                $.post(base + "/platform/sys/unit/delete/" + command.id, {}, function (data) {
                                    if (data.code == 0) {
                                        self.$message({
                                            message: data.msg,
                                            type: 'success'
                                        });
                                        self.initTreeTable();
                                    } else {
                                        self.$message({
                                            message: data.msg,
                                            type: 'error'
                                        });
                                    }
                                }, "json");
                            }
                        }
                    });
                }
            }
        },
        created: function () {
            this.initTreeTable();
        }
    });
</script>
<!--#
}
#-->
